<!DOCTYPE html>
<html>

<head>

	<meta charset="utf-8" />

	<title>Demo Chat</title>

	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

	<style>
		body {
			padding: 20px;
		}

		#console {
			height: 400px;
			overflow: auto;
		}

		.username-msg {
			color: orange;
		}

		.connect-msg {
			color: green;
		}

		.disconnect-msg {
			color: red;
		}

		.send-msg {
			color: #888
		}
	</style>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
	<script type="text/javascript"
		src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.4.0/sockjs.min.js"></script>

	<script>
		var stompClient = null;

		function connect() {
			var socket = new SockJS('/socket');
			stompClient = Stomp.over(socket);
			stompClient.connect({}, function (frame) {
				output("client03连接成功");
				//建立连接后的回调
				stompClient.subscribe('/request/sendNoRelay', function (data) {
					output(data.body);
				});
			},
				function (errorCallback) {
					//连接断开时尝试发起重连
					output("client03断开连接");
					console.log(errorCallback);
					reconnect();
				});
		}

		function reconnect() {
			setTimeout(function () {
				connect();
			}, 3000);
		}

		function disconnect() {
			if (stompClient != null) {
				stompClient.disconnect();
			}
		}

		function output(message) {
			var currentTime = "<span class='time'>"
				+ moment().format('HH:mm:ss.SSS') + "</span>";
			var element = $("<div>" + currentTime + " " + message + "</div>");
			$('#console').prepend(element);
		}

		function sendDisconnect() {
			socket.close();
		}

		function sendMessage() {
			var message = $('#msg').val();
			$('#msg').val('');
			if (stompClient != null) {
				stompClient.send("/request/sendNoRelay", {}, message);
			}
		}


	</script>
</head>

<body>
	<h1>Demo Chat-client03</h1>
	<br />
	<div id="console" class="well"></div>
	<form class="well form-inline" οnsubmit="return false;">
		<input id="msg" class="input-xlarge" type="text" placeholder="Type something..." />
		<button type="button" onClick="sendMessage()" class="btn" id="send">Send</button>
		<button type="button" onClick="connect()" class="btn">Connect</button>
		<button type="button" onClick="disconnect()" class="btn">Disconnect</button>
	</form>
</body>

</html>